<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>会员信息管理</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    :root {
      --primary-color: #4CAF50;
      --secondary-color: #f8f9fa;
      --card-shadow: 0 4px 8px rgba(0,0,0,0.05);
      --hover-color: rgba(76, 175, 80, 0.1);
    }

    body {
      background-color: #f5f7fa;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
    }

    .sidebar {
      background-color: white;
      height: 100vh;
      box-shadow: 2px 0 10px rgba(0,0,0,0.05);
      position: fixed;
      z-index: 100;
      width: 250px;
    }

    .sidebar .nav-link {
      color: #495057;
      border-radius: 5px;
      margin-bottom: 5px;
      padding: 10px 15px;
    }

    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: var(--hover-color);
      color: var(--primary-color);
    }

    .sidebar .nav-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
    }

    .main-content {
      margin-left: 250px;
      padding: 30px;
      min-height: 100vh;
    }

    .page-header {
      background-color: white;
      padding: 20px 25px;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      margin-bottom: 25px;
    }

    .dashboard-card {
      background-color: white;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      padding: 25px;
      transition: transform 0.3s, box-shadow 0.3s;
      border: none;
    }

    .admin-info {
      padding: 30px 20px 20px;
      text-align: center;
      border-bottom: 1px solid #e9ecef;
    }

    .admin-avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      background-color: #e9f5eb;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
      color: var(--primary-color);
      font-size: 2.5rem;
    }

    .admin-name {
      font-weight: 600;
      margin-bottom: 5px;
      font-size: 1.2rem;
    }

    .admin-role {
      color: #6c757d;
      font-size: 0.95rem;
      background-color: #e9f5eb;
      padding: 3px 10px;
      border-radius: 15px;
      display: inline-block;
      margin-top: 10px;
    }

    .member-management-container {
      background: white;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      padding: 25px;
    }

    .form-card {
      background-color: white;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      padding: 25px;
      margin-bottom: 25px;
      border: none;
    }

    .btn-action {
      background-color: var(--primary-color);
      color: white;
      border-radius: 5px;
      padding: 8px 16px;
      text-decoration: none;
      border: none;
      transition: background-color 0.3s;
    }

    .btn-action:hover {
      background-color: #3d8b40;
      color: white;
    }

    .btn-edit {
      background-color: #2196F3;
      color: white;
    }

    .btn-delete {
      background-color: #f44336;
      color: white;
    }

    .btn-add {
      display: inline-flex;
      align-items: center;
      margin-bottom: 20px;
    }

    .action-buttons {
      display: flex;
      gap: 8px;
    }

    .table-container {
      overflow-x: auto;
    }

    .table-custom th {
      background-color: var(--primary-color);
      color: white;
      font-weight: 600;
    }

    .notification-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background-color: #dc3545;
      color: white;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .status-indicator {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 5px;
    }

    .status-active {
      background-color: var(--primary-color);
    }

    .modal-dialog {
      max-width: 600px;
    }

    .modal-content {
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      border: none;
    }

    .modal-header {
      background-color: #f8f9fa;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom: 1px solid #e9ecef;
      padding: 15px 20px;
    }

    .modal-title {
      color: var(--primary-color);
      font-weight: 600;
    }

    .member-photo {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      background-color: #e9f5eb;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-color);
    }
  </style>
</head>
<body>
<div class="sidebar">
  <div class="admin-info">
    <div class="admin-avatar">
      <i class="bi bi-person-badge"></i>
    </div>
    <div class="admin-name">${user.username}</div>
    <div class="admin-role">系统管理员</div>
  </div>

  <nav class="nav flex-column mt-4 px-2">
    <a class="nav-link" href="../adminHome.jsp">
      <i class="bi bi-speedometer2"></i> 控制面板
    </a>
    <a class="nav-link active" href="members">
      <i class="bi bi-people"></i> 会员管理
    </a>
    <a class="nav-link" href="houses">
      <i class="bi bi-house-door"></i> 房产管理
    </a>
    <a class="nav-link" href="venues">
      <i class="bi bi-building"></i> 场馆管理
    </a>
    <a class="nav-link" href="users">
      <i class="bi bi-person-gear"></i> 用户管理
    </a>
    <a class="nav-link" href="profile">
      <i class="bi bi-person-circle"></i> 个人设置
    </a>
    <a class="nav-link" href="logout" style="margin-top: 20px;">
      <i class="bi bi-box-arrow-right"></i> 退出系统
    </a>
  </nav>
</div>

<div class="main-content">
  <div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h2>会员信息管理</h2>
        <p class="text-muted mb-0">管理社区会员信息，共计 ${members.size()} 位会员</p>
      </div>
      <div class="d-flex">
        <div class="position-relative me-3">
          <a href="#" class="btn btn-outline-secondary position-relative">
            <i class="bi bi-bell"></i>
          </a>
        </div>
        <div class="dropdown">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
            <i class="bi bi-gear"></i>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="profile">个人设置</a></li>
            <li><a class="dropdown-item" href="#">系统设置</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="logout">退出系统</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="member-management-container">
    <% if (request.getAttribute("success") != null) { %>
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <%= request.getAttribute("success") %>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <% } %>
    <% if (request.getAttribute("error") != null) { %>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <%= request.getAttribute("error") %>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <% } %>

    <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
        <button class="btn btn-action btn-add" onclick="openAddModal()">
          <i class="bi bi-plus-circle me-2"></i>添加会员
        </button>
      </div>
<%--      <div class="d-flex">
        <div class="input-group" style="max-width: 300px;">
          <button class="btn btn-outline-success" type="button"><i class="bi bi-search"></i></button>
        </div>
      </div>--%>
    </div>

    <div class="table-container">
      <table class="table table-custom table-hover align-middle">
        <thead>
        <tr>
          <th>会员照片</th>
          <th>会员ID</th>
          <th>姓名</th>
          <th>性别</th>
          <th>出生日期</th>
          <th>联系电话</th>
          <th>会员类型</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="member" items="${members}">
          <tr>
            <td>
              <div class="member-photo">
                <i class="bi bi-person-circle"></i>
              </div>
            </td>
            <td>${member.memberId}</td>
            <td>${member.realName}</td>
            <td>${member.gender}</td>
            <td>${member.birthDate}</td>
            <td>${member.phone}</td>
            <td>
                <span class="badge bg-success bg-opacity-10 text-success">
                    ${member.memberType}
                </span>
            </td>
            <td>
                <span class="d-flex align-items-center">
                  <span class="status-indicator status-active"></span>
                  <span>活跃</span>
                </span>
            </td>
            <td>
              <div class="action-buttons">
                <button class="btn btn-sm btn-edit"
                        onclick="openEditModal(${member.memberId}, '${member.realName}', '${member.gender}', '${member.birthDate}', '${member.phone}', '${member.idCard}', '${member.contactName}', '${member.contactPhone}', '${member.memberType}', '${member.remark}')">
                  <i class="bi bi-pencil"></i>
                </button>
                <button class="btn btn-sm btn-delete"
                        onclick="confirmDelete(${member.memberId})">
                  <i class="bi bi-trash"></i>
                </button>
              </div>
            </td>
          </tr>
        </c:forEach>
        </tbody>
      </table>
    </div>

  </div>
</div>

<!-- 添加会员模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-plus-circle me-2"></i>添加新会员</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addForm" action="addMember" method="post">
        <div class="modal-body">
          <div class="mb-3">
            <label for="addMemberId" class="form-label">会员ID</label>
            <input type="number" class="form-control" id="addMemberId" name="memberId" required>
          </div>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="addRealName" class="form-label">真实姓名</label>
              <input type="text" class="form-control" id="addRealName" name="realName" required>
            </div>
            <div class="col-md-6 mb-3">
              <label for="addGender" class="form-label">性别</label>
              <select class="form-select" id="addGender" name="gender" required>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="addBirthDate" class="form-label">出生日期</label>
              <input type="date" class="form-control" id="addBirthDate" name="birthDate" required>
            </div>
            <div class="col-md-6 mb-3">
              <label for="addPhone" class="form-label">联系电话</label>
              <input type="text" class="form-control" id="addPhone" name="phone" required>
            </div>
          </div>
          <div class="mb-3">
            <label for="addIdCard" class="form-label">身份证号</label>
            <input type="text" class="form-control" id="addIdCard" name="idCard" required>
          </div>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="addContactName" class="form-label">紧急联系人姓名</label>
              <input type="text" class="form-control" id="addContactName" name="contactName" required>
            </div>
            <div class="col-md-6 mb-3">
              <label for="addContactPhone" class="form-label">紧急联系人电话</label>
              <input type="text" class="form-control" id="addContactPhone" name="contactPhone" required>
            </div>
          </div>
          <div class="row">
            <div class="col-md-8 mb-3">
              <label for="addMemberType" class="form-label">会员类型</label>
              <select class="form-select" id="addMemberType" name="memberType" required>
                <option value="标准会员">标准会员</option>
                <option value="高级会员">高级会员</option>
                <option value="贵宾会员">贵宾会员</option>
                <option value="临时会员">临时会员</option>
              </select>
            </div>
          </div>
          <div class="mb-3">
            <label for="addRemark" class="form-label">备注信息</label>
            <textarea class="form-control" id="addRemark" name="remark" rows="2"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-success">保存会员信息</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 编辑会员模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-pencil me-2"></i>编辑会员信息</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editForm" action="updateMember" method="post">
        <div class="modal-body">
          <input type="hidden" id="editMemberId" name="memberId">
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="editRealName" class="form-label">真实姓名</label>
              <input type="text" class="form-control" id="editRealName" name="realName" required>
            </div>
            <div class="col-md-6 mb-3">
              <label for="editGender" class="form-label">性别</label>
              <select class="form-select" id="editGender" name="gender" required>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="editBirthDate" class="form-label">出生日期</label>
              <input type="date" class="form-control" id="editBirthDate" name="birthDate" required>
            </div>
            <div class="col-md-6 mb-3">
              <label for="editPhone" class="form-label">联系电话</label>
              <input type="text" class="form-control" id="editPhone" name="phone" required>
            </div>
          </div>
          <div class="mb-3">
            <label for="editIdCard" class="form-label">身份证号</label>
            <input type="text" class="form-control" id="editIdCard" name="idCard" required>
          </div>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="editContactName" class="form-label">紧急联系人姓名</label>
              <input type="text" class="form-control" id="editContactName" name="contactName" required>
            </div>
            <div class="col-md-6 mb-3">
              <label for="editContactPhone" class="form-label">紧急联系人电话</label>
              <input type="text" class="form-control" id="editContactPhone" name="contactPhone" required>
            </div>
          </div>
          <div class="row">
            <div class="col-md-8 mb-3">
              <label for="editMemberType" class="form-label">会员类型</label>
              <select class="form-select" id="editMemberType" name="memberType" required>
                <option value="标准会员">标准会员</option>
                <option value="高级会员">高级会员</option>
                <option value="贵宾会员">贵宾会员</option>
                <option value="临时会员">临时会员</option>
              </select>
            </div>
          </div>
          <div class="mb-3">
            <label for="editRemark" class="form-label">备注信息</label>
            <textarea class="form-control" id="editRemark" name="remark" rows="2"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-success">更新会员信息</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-danger"><i class="bi bi-exclamation-triangle me-2"></i>确认删除</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="d-flex align-items-center mb-4">
          <div class="me-3">
            <div class="member-photo" style="width: 50px; height: 50px;">
              <i class="bi bi-person"></i>
            </div>
          </div>
          <div>
            <h5 class="mb-1" id="deleteMemberName"></h5>
            <p class="text-muted mb-0">会员ID: <span id="deleteMemberId"></span></p>
          </div>
        </div>
        <div class="alert alert-warning" role="alert">
          <i class="bi bi-exclamation-circle"></i>
          确定要删除这个会员吗？该操作不可撤销，将永久删除该会员的所有信息。
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
        <form id="deleteForm" method="post" action="deleteMember">
          <input type="hidden" id="deleteMemberIdInput" name="memberId">
          <button type="submit" class="btn btn-danger">确认删除</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 添加会员模态框控制
  function openAddModal() {
    const modal = new bootstrap.Modal(document.getElementById('addModal'));
    modal.show();
  }

  // 在页面加载时设置当前激活菜单项
  document.addEventListener('DOMContentLoaded', function() {
    // 设置会员管理菜单为激活状态
    const membersLink = document.querySelector('.nav-link[href="admin/members"]');
    if (membersLink) {
      // 移除其他菜单项的active类
      document.querySelectorAll('.nav-link').forEach(link => {
        link.classList.remove('active');
      });
      membersLink.classList.add('active');
    }
  });

  // 编辑会员模态框控制
  function openEditModal(memberId, realName, gender, birthDate, phone, idCard, contactName, contactPhone, memberType, remark) {
    document.getElementById('editMemberId').value = memberId;
    document.getElementById('editRealName').value = realName;
    document.getElementById('editGender').value = gender;
    document.getElementById('editBirthDate').value = birthDate;
    document.getElementById('editPhone').value = phone;
    document.getElementById('editIdCard').value = idCard;
    document.getElementById('editContactName').value = contactName;
    document.getElementById('editContactPhone').value = contactPhone;
    document.getElementById('editMemberType').value = memberType;
    document.getElementById('editRemark').value = remark;

    const modal = new bootstrap.Modal(document.getElementById('editModal'));
    modal.show();
  }

  // 删除确认
  function confirmDelete(memberId) {
    // 在实际应用中，这里会获取会员姓名信息
    document.getElementById('deleteMemberId').textContent = memberId;
    document.getElementById('deleteMemberName').textContent = "会员 (ID: " + memberId + ")";
    document.getElementById('deleteMemberIdInput').value = memberId;

    const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
    modal.show();
  }

  // 表单日期初始化
  document.addEventListener('DOMContentLoaded', function() {
    // 设置日期控件的最大值为今天
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('addBirthDate').max = today;
    document.getElementById('editBirthDate').max = today;
  });
</script>
</body>
</html>